<template>
  <div class="app-container">
    <el-upload
      ref="upload"
      class="upload-demo"
      :action="uploadAction"
      :headers="Ttoken"
      accept=".jpg,.jpeg,.png,.gif,.bmp,.JPG,.JPEG,.PNG,.GIF,.BMP"
      :auto-upload="false"
      :before-upload="beforeUpload"
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      :before-remove="beforeRemove"
      multiple
      :limit="1"
      :on-exceed="handleExceed"
      :file-list="form.fileList"
      list-type="picture"
    >
      <!--      <i slot="default" class="el-icon-plus" />-->
      <el-button size="small">点击上传</el-button>
      <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过5Mb！</div>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
    <el-button type="primary" @click="submitAttr">立即提交</el-button>
  </div>
</template>

<script>
import { getToken } from '@/utils/auth'
// import { getFileType } from '@/utils'
export default {
  name: 'Index',
  data() {
    return {
      uploadAction: 'http://192.168.1.103:8301/achievement/award/insertAAnnex',
      dialogImageUrl: '',
      dialogVisible: false,
      // 提交按钮加载
      buttonLoading: false,
      // loading: false,
      // 用于三级奖项选择
      showL1: true,
      list1: [],
      value1: null,
      list2: [],
      value2: null,
      list3: [],
      value3: null,
      // 用于asIndex拉取
      asIndex: null,
      // 用于存放表单模块名称、类型数据
      label: [],
      type: [],
      // 下拉框选项
      form: {
        // 用于下拉框
        enum: '',
        rIndex: '',
        // 文件上传
        fileList: []
      },
      // 用于属性上传
      attrsList: []
    }
  },
  computed: {
    Ttoken: function() {
      return { Authorization: 'bearer ' + getToken() }
    }
  },
  mounted() {
  },
  methods: {
    // 上传属性
    submitAttr() {
      this.buttonLoading = true
      this.submitUpload()
    },
    // 用于文件传输
    submitUpload() {
      this.$refs.upload.submit()
    },
    // 限制文件的大小，限制文件的类型
    // beforeUpload(file) {
    //   console.log('file如下')
    //   console.log(file)
    //   const type = getFileType(file.name)
    //   console.log('filetype如下')
    //   console.log(type)
    //   const isJPG = type === 'png'
    //   const isLt2M = file.size / 1024 / 1024 < 5
    //   if (!isJPG) {
    //     this.$message.error('仅允许图片格式!')
    //   }
    //   if (!isLt2M) {
    //     this.$message.error('上传头像图片大小不能超过 5MBB!')
    //   }
    //   return isJPG && isLt2M
    // },
    beforeUpload(file) {
      const isJPG = file.type === 'image/png' || 'image/jpg' || 'image/jpeg' || 'image/gif' || 'image/bmp' || 'image/JPG' || 'image/JPEG' || 'image/GIF' || 'image/BMP'
      const isLt2M = file.size / 1024 / 1024 < 5

      if (!isJPG) {
        this.$message.error('证明材料仅允许 jpg/jpeg/png/gif/bmp 格式!')
      }
      if (!isLt2M) {
        this.$message.error('证明材料大小不能超过 5MB!')
      }
      return isJPG && isLt2M
    },
    handleRemove(file, fileList) {
      // eslint-disable-next-line no-undef
      console.log(file, this.form.fileList)
    },
    handlePreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
      console.log('file如下')
      console.log(file)
      console.log('filetype:' + file.raw.type)
      console.log(file, this.form.fileList)
    },
    handleExceed(files, fileList) {
      // this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
      this.$message.warning(`当前限制选择 1 个文件`)
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`)
    }
  }
}
</script>

<style scoped>
</style>
